<script setup>
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import {
		onLoad,
		onShow,
		onUnload,
		onHide
	} from '@dcloudio/uni-app';
	import {
		getDanCiApi
	} from '/api/request.js';
	import {
		includeListGetItem
	} from '/utils/index.js';
	const props = defineProps({});
	onMounted(() => {});
	let platform = uni.getStorageSync('platform');
	const goback = async () => {
		uni.navigateBack();
	};
	onHide(() => {
		uni.$emit('pause');
	});
	onUnload(() => {
		uni.$emit('pause');
	});
	const query = ref({
		learning_id: '',
		index: 0
	});
	const list = ref([]);
	const dui = ref([]);
	const lists = ref(null);
	onLoad(async (e) => {
		query.value.word_ids = e.id;
		uni.showLoading();
		let res = await getDanCiApi(query.value);
		uni.hideLoading();
		console.log(res);
		list.value = res.data;
		console.log(list.value);
	});
	const playIndex = ref(-1);
	const select = ref('');
	const changeSelect = (e) => {
		query.value.index = 0;
		select.value = e;
		list.value = select.value == 1 ? dui.value : lists.value;
	};

	const center = ref(null);
	const change = (index) => {
		if (index == 2) {
			center.value.open('center');
		}
	};
	//最后点击的是谁
	const nowIndex = ref(null);
	//被点击过都在里面
	const getIdList = ref([]);
	const getIdLists = ref([]);
	//点击过是第几次点击
	const statusList = ref({});
	const playAudio = (id, url, status = false) => {
		uni.$emit('playAudio', url);
		nowIndex.value = id;
		const indexs = getIdList.value.findIndex((item) => item == id);
		if (indexs == -1) {
			select.value == 0 ? getIdList.value.push(id) : getIdLists.value.push(id);
		}
		//剪纸盒子的骡子
		const index = statusList.value.id == id;
		if (!index) {
			statusList.value.id = id;
			statusList.value.status = 1;
		} else {
			statusList.value.status =
				statusList.value.status == 1 ?
				2 :
				statusList.value.status == 2 ?
				3 :
				statusList.value.status == 3 ?
				1 :
				1;
		}
	};

	const returnItemClassStatus = (id) => {
		if (nowIndex.value) {
			let index = includeListGetItem(select.value == 0 ? getIdList.value : getIdLists.value, id);
			if (index == -1) {
				return 'none';
			}
			const zhege = statusList.value.id == id;
			if (zhege) {
				let num = statusList.value.status;
				if (num == 1) {
					return 'heide';
				} else if (num == 2) {
					return 'fanyi';
				} else if (num == 3) {
					return 'kong';
				}
			}
		} else {
			return 'none';
		}
	};
	const returnStatus = (id) => {
		const index = statusList.value.id == id;
		if (index) {
			const status = statusList.value.status;
			if (status === 1) {
				return 'buyaoyinbiao';
			} else if (status === 2) {
				return 'active';
			} else if (status === 3) {
				return 'zheli';
			}
		}
		return '';
	};
	const noSelectList = ref([]);
	const selectList = ref([]);
	const changeSelectList = (id) => {
		const index = selectList.value.findIndex((item) => item == id);
		if (index == -1) {
			selectList.value.push(id);
		}
		const indexs = noSelectList.value.findIndex((item) => item == id);
		if (indexs != -1) {
			noSelectList.value.splice(indexs, 1);
		}
	};
	const getSelectId = (id) => {
		if (selectList.value.length) {
			return selectList.value.includes(id);
		} else {
			return false;
		}
	};
	const showTop = ref(false);
	const last = () => {
		query.value.index = query.value.index == 0 ? 0 : query.value.index - 1;
		playIndex.value = -1;
	};
	const next = () => {
		playIndex.value = -1;
		query.value.index =
			query.value.index == Math.ceil(list.value.length / 100) - 1 ?
			list.value.length / 100 - 1 :
			query.value.index + 1;
	};
	const quanxuan = () => {
		const arr = list.value.slice(query.value.index * 100, (query.value.index + 1) * 100);
		if (selectList.value.length == arr.length) {
			selectList.value = [];
		} else {
			selectList.value = arr.map((item) => {
				return item.id;
			});
		}
	};
</script>

<template>
	<view class="wrap" :style="{
            height: platform.gaodu + 'rpx'
        }">
		<view class="header-wrap uni-row" :style="{
                paddingTop: platform.dingbu + 'rpx',
                height: platform.dingbu + 96 + 'rpx'
            }">
			<view class="lefts uni-row">
				<image class="left" src="/static/img/goback-black.png" @click="goback" mode="widthFix" />
				<view class="title"> 练后汇总 </view>
			</view>
			<view class="rights uni-row">
				<view class="menu">
					<view class="item uni-row dayin" @click="showTop = !showTop"> 打印 </view>
					<view class="item uni-row yings" v-show="showTop"> 英译汉 </view>
					<view class="item uni-row yingss" v-show="showTop"> 汉译英 </view>
				</view>
				<view class="submit uni-row" @click="quanxuan">
					{{
                        selectList.length ==
                        list.slice(query.index * 100, (query.index + 1) * 100).length
                            ? '取消全选'
                            : '全选'
                    }}
				</view>
			</view>
		</view>
		<scroll-view :style="{ height: platform.gaodu - platform.dingbu - 96 - 48 - 40 + 'rpx' }" scroll-y="true"
			class="body" v-if="list && list.length">
			<view class="" style="height: 20rpx" />
			<view class="item uni-row" :id="item.id"
				v-for="(item, index) in list.slice(query.index * 100, (query.index + 1) * 100)" :key="index"
				:class="returnItemClassStatus(item.id)" @click="playAudio(item.id, item.detail.word_audio_url_en)">
				<view class="zuo uni-row">
					<view class="uni-row">
						{{ item.name }}
					</view>
				</view>
				<view class="fanti">
					{{ item.detail.word_explain[0].means[0] }}
				</view>
				<view class="right uni-row">
					打印:
					<view class="items uni-row" @click.stop="changeSelectList(item.id)"
						:class="getSelectId(item.id) ? 'default' : ''">
						<image src="/static/img/wolrd/default-dui.png" class="icon s"></image>
						<image src="/static/img/wolrd/dui.png" class="icon ss"></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="nothing" v-if="list && list.length < 1">
			<image src="/static/img/nothing.png" class="img"></image>
			<view class="label"> 哎呀，这里什么内容都没有 </view>
		</view>
	</view>
	<view class="footers uni-row" v-if="list.length > 5">
		<view class="icon uni-row" @click="last">
			<image src="/static/img/wolrd/last.png" class="last"></image>
		</view>
		<view class="liang"> {{ query.index + 1 }} / {{ Math.ceil(list.length / 100) }} </view>
		<view class="icon uni-row" @click="next">
			<image src="/static/img/wolrd/next.png" class="next"></image>
		</view>
	</view>
</template>

<style scoped lang="less">
	.wrap {
		background: url('/static/img/wolrd/bg.png');
		background-size: 100% 100%;

		.header-wrap {
			justify-content: space-between;
			padding-left: 24rpx;
			padding-right: 24rpx;

			.left {
				width: 48rpx;
			}

			.title {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				margin-left: 32rpx;
			}

			.menu {
				position: relative;

				.item {
					justify-content: center;
					width: 144rpx;
					height: 52rpx;
					font-size: 24rpx;

					&.dayin {
						color: #fff;
						background: #fa862c;
						border-radius: 8rpx;
					}

					&.yings {
						position: absolute;
						top: 52rpx;
						z-index: 100;
						background: #ffe5d2;
						border-radius: 8rpx 8rpx 0 0;
						color: #fa862c;
					}

					&.yingss {
						border-radius: 0 0 8rpx 8rpx;
						position: absolute;
						top: 104rpx;
						z-index: 100;
						color: #fa862c;
						background: #fff3ea;
					}
				}
			}

			.submit {
				font-size: 24rpx;
				color: #fff;
				background-color: #9561f3;
				justify-content: center;
				width: 144rpx;
				height: 52rpx;
				border-radius: 8rpx;
				margin-left: 32rpx;
			}
		}

		.menu-list {
			background-color: #fff;

			.item {
				flex: 1;
				height: 96rpx;
				justify-content: center;
				font-size: 30rpx;
				color: #333333;
				border-bottom: 1rpx solid transparent;

				&.active {
					color: #9561f3;
					font-weight: 500;
					border-bottom: 1rpx solid #9561f3;
				}
			}
		}

		.body {
			padding: 0 28rpx;

			.item {
				justify-content: space-between;
				height: 86rpx;
				margin-bottom: 16rpx;
				overflow: hidden;
				background-color: #fff;
				padding: 0 28rpx;
				border-radius: 8rpx;

				.zuo {
					.yuan {
						justify-content: center;
						width: 42rpx;
						height: 42rpx;
						border-radius: 50%;
						background: #ef4828;
						font-size: 24rpx;
						margin-right: 30rpx;
						color: #ffffff;
					}

					.yingwen {
						font-size: 36rpx;
						color: #333333;
						line-height: 86rpx;
					}
				}

				.fanti {
					font-size: 28rpx;
					color: #333333;
					opacity: 0;
					transition: 0.2s all;
				}

				.right {
					font-size: 24rpx;
					color: #999999;

					.items {
						justify-content: center;
						margin-left: 10rpx;
						height: 48rpx;

						.icon {
							width: 32rpx;
							height: 32rpx;
							margin-right: 10rpx;
						}

						.ss {
							display: none;
						}

						&.default {
							.ss {
								display: block;
							}

							.s {
								display: none;
							}
						}
					}
				}

				&.heide {
					.zuo {
						.uni-row {
							font-weight: 500;
						}
					}
				}

				&.fanyi {
					.zuo {
						.uni-row {
							font-weight: 500;
						}
					}

					.fanti {
						opacity: 1;
					}
				}

				&.kong {
					.zuo {
						opacity: 0;
					}
				}
			}
		}
	}

	.footer-tongji {
		position: fixed;
		bottom: 28rpx;
		left: 0;
		right: 0;
		z-index: 33;
		justify-content: space-between;
		padding: 0 28rpx;

		.left-wrap {
			.item {
				font-size: 24rpx;
				color: #333333;
				margin-right: 18rpx;

				.dui {
					width: 32rpx;
					height: 32rpx;
					margin-right: 10rpx;
				}
			}
		}

		.right {
			justify-content: center;
			width: 182rpx;
			height: 60rpx;
			background: #9561f3;
			border-radius: 16rpx;
			font-size: 30rpx;
			color: #ffffff;
		}
	}

	.footers {
		position: fixed;
		left: 50%;
		bottom: 28rpx;
		transform: translate(-50%, 0);
		justify-content: center;

		.liang {
			font-size: 24rpx;
			color: #333333;
			// margin: 0 26rpx;
		}

		.icon {
			justify-content: center;
			padding: 0 26rpx;
		}

		.last,
		.next {
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>